<template>
  <div id='temp'>
    <div class="title">编辑培训计划</div>
    <el-row>
      <el-form ref="form" :model="form" :rules="formRules" label-width="150px" class="demo-dynamic">
        <el-col :span="8">
          <div>
            <el-form-item label="培训课程" prop="courseid">
              <el-select v-model="form.courseid" placeholder="请选择" disabled
                         @change="chooseCourse">
                <el-option v-for="item in courseList" :key="item.id" :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程天数" prop="days">
              <el-input v-model="form.days" placeholder="请输入" @change="daysChange"></el-input>
            </el-form-item>
            <el-form-item label="开课日期" prop="startdate">
              <el-date-picker v-model="form.startdate" type="date" placeholder="选择日期"
                              
                              @change="getStartDate">
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-form-item label="主讲培训师" prop="trainer">
              <el-select v-model="form.trainer" placeholder="请选择" clearable filterable>
                <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="团购价" prop="tgprice">
              <el-input v-model="form.tgprice" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="最小团购人数" prop="tgnum">
              <el-input v-model.number="form.tgnum" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-form-item label="状态" prop="state">
              <el-select v-model="form.state" placeholder="请选择">
                <el-option v-for="item in stateList" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="人工费" prop="labour">
              <el-input v-model="form.labour" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="场地费" prop="yard">
              <el-input v-model="form.yard" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-form>
    </el-row>
    <div>
      <div class="times">
        <span>{{timeMonth}}</span>
        <!--<div>-->
        <!--<el-radio-group v-model="radio3">-->
        <!--<el-radio-button label="上周"><span class="arrow"><</span>&nbsp;&nbsp;上周</el-radio-button>-->
        <!--<el-radio-button label="下周">下周&nbsp;&nbsp;<span class="arrow">></span></el-radio-button>-->
        <!--<el-radio-button label="本周"></el-radio-button>-->
        <!--</el-radio-group>-->
        <!--</div>-->
      </div>
      <div class="table-wrapper training-table-wrapper">
        <table class="tab-table select-table">
          <thead>
          <tr>
            <th colspan="2" rowspan="2">时段</th>
            <th v-for="item in timeDays">{{item}}</th>
          </tr>
          <tr>
            <th v-for="item in timeWeeks">{{item}}</th>
          </tr>
          </thead>
          <tbody>

          <tr>
            <td rowspan="9">上午</td>
            <td rowspan="2">主讲培训师</td>
            <td v-for="n in form.days||7">
              <el-select v-model="trainer1_m[n-1]" placeholder="请选择" clearable filterable @change="change(n,'trainer1')">
                <el-option v-for="item in trainerList" :key="item.staffid" :label="item.name"
                           :value="item.staffid">
                </el-option>
              </el-select>
              <el-input v-model="trainer1_m_hour[n-1]"></el-input>
            </td>
          </tr>
          <tr>
            <td v-for="n in form.days||7">
              <el-select v-model="trainer2_m[n-1]" placeholder="请选择" clearable filterable @change="change(n,'trainer2')">
                <el-option v-for="item in trainerList" :key="item.staffid" :label="item.name"
                           :value="item.staffid">
                </el-option>
              </el-select>
              <el-input v-model="trainer2_m_hour[n-1]"></el-input>
            </td>
          </tr>
          <tr>
            <td rowspan="2">模拟器操作员</td>
            <td v-for="n in form.days||7">
              <el-select v-model="operator1_m[n-1]" placeholder="请选择" clearable filterable
                         @change="change(n,'operator1')">
                <el-option v-for="item in operatorList" :key="item.staffid" :label="item.name"
                           :value="item.staffid">
                </el-option>
              </el-select>
              <el-input v-model="operator1_m_hour[n-1]"></el-input>
            </td>
          </tr>
          <tr>
            <td v-for="n in form.days||7">
              <el-select v-model="operator2_m[n-1]" placeholder="请选择" clearable filterable
                         @change="change(n,'operator2')">
                <el-option v-for="item in operatorList" :key="item.staffid" :label="item.name"
                           :value="item.staffid">
                </el-option>
              </el-select>
              <el-input v-model="operator2_m_hour[n-1]"></el-input>
            </td>
          </tr>
          <tr>
            <td rowspan="2">教室</td>
            <td v-for="n in form.days||7">
              <el-select v-model="classroom1_m[n-1]" placeholder="请选择" clearable filterable
                         @change="change(n,'classroom1')">
                <el-option v-for="item in classroomList" :key="item.classroomid" :label="item.name"
                           :value="item.classroomid">
                </el-option>
              </el-select>
              <el-input v-model="classroom1_m_hour[n-1]"></el-input>              
            </td>
          </tr>
          <tr>
            <td v-for="n in form.days||7">
              <el-select v-model="classroom2_m[n-1]" placeholder="请选择" clearable filterable
                         @change="change(n,'classroom2')">
                <el-option v-for="item in classroomList" :key="item.classroomid" :label="item.name"
                           :value="item.classroomid">
                </el-option>
              </el-select>
              <el-input v-model="classroom2_m_hour[n-1]"></el-input>    
            </td>
          </tr>
          <tr>
            <td rowspan="3">模拟器</td>
            <td v-for="n in form.days||7">
              <el-select v-model="simulator1_m[n-1]" placeholder="请选择" clearable filterable
                         @change="change(n,'simulator1')">
                <el-option v-for="item in simulatorList" :key="item.simulatorid"
                           :label="item.asset_name" :value="item.simulatorid">
                </el-option>
              </el-select>
              <el-input v-model="simulator1_m_hour[n-1]"></el-input>    
            </td>
          </tr>
          <tr>
            <td v-for="n in form.days||7">
              <el-select v-model="simulator2_m[n-1]" placeholder="请选择" clearable filterable
                         @change="change(n,'simulator2')">
                <el-option v-for="item in simulatorList" :key="item.simulatorid"
                           :label="item.asset_name" :value="item.simulatorid">
                </el-option>
              </el-select>
              <el-input v-model="simulator2_m_hour[n-1]"></el-input>
            </td>
          </tr>
          <tr>
            <td v-for="n in form.days||7">
              <el-select v-model="simulator3_m[n-1]" placeholder="请选择" clearable filterable
                         @change="change(n,'simulator3')">
                <el-option v-for="item in simulatorList" :key="item.simulatorid"
                           :label="item.asset_name" :value="item.simulatorid">
                </el-option>
              </el-select>
              <el-input v-model="simulator3_m_hour[n-1]"></el-input>
            </td>
          </tr>
          <tr>
            <td rowspan="9">下午</td>
            <td rowspan="2">主讲培训师</td>
            <td v-for="n in form.days||7">
              <el-select v-model="trainer1_a[n-1]" placeholder="请选择" clearable filterable @change="change(n,'trainer1')">
                <el-option v-for="item in trainerList" :key="item.staffid" :label="item.name"
                           :value="item.staffid">
                </el-option>
              </el-select>
              <el-input v-model="trainer1_a_hour[n-1]"></el-input>
            </td>
          </tr>
          <tr>
            <td v-for="n in form.days||7">
              <el-select v-model="trainer2_a[n-1]" placeholder="请选择" clearable filterable @change="change(n,'trainer2')">
                <el-option v-for="item in trainerList" :key="item.staffid" :label="item.name"
                           :value="item.staffid">
                </el-option>
              </el-select>
              <el-input v-model="trainer2_a_hour[n-1]"></el-input>
            </td>
          </tr>
          <tr>
            <td rowspan="2">模拟器操作员</td>
            <td v-for="n in form.days||7">
              <el-select v-model="operator1_a[n-1]" placeholder="请选择" clearable filterable
                         @change="change(n,'operator1')">
                <el-option v-for="item in operatorList" :key="item.staffid" :label="item.name"
                           :value="item.staffid">
                </el-option>
              </el-select>
              <el-input v-model="operator1_a_hour[n-1]"></el-input>
            </td>
          </tr>
          <tr>
            <td v-for="n in form.days||7">
              <el-select v-model="operator2_a[n-1]" placeholder="请选择" clearable filterable
                         @change="change(n,'operator2')">
                <el-option v-for="item in operatorList" :key="item.staffid" :label="item.name"
                           :value="item.staffid">
                </el-option>
              </el-select>
              <el-input v-model="operator2_a_hour[n-1]"></el-input>
            </td>
          </tr>
          <tr>
            <td rowspan="2">教室</td>
            <td v-for="n in form.days||7">
              <el-select v-model="classroom1_a[n-1]" placeholder="请选择" clearable filterable
                         @change="change(n,'classroom1')">
                <el-option v-for="item in classroomList" :key="item.classroomid" :label="item.name"
                           :value="item.classroomid">
                </el-option>
              </el-select>
              <el-input v-model="classroom1_a_hour[n-1]"></el-input>
            </td>
          </tr>
          <tr>
            <td v-for="n in form.days||7">
              <el-select v-model="classroom2_a[n-1]" placeholder="请选择" clearable filterable
                         @change="change(n,'classroom2')">
                <el-option v-for="item in classroomList" :key="item.classroomid" :label="item.name"
                           :value="item.classroomid">
                </el-option>
              </el-select>
              <el-input v-model="classroom2_a_hour[n-1]"></el-input>
            </td>
          </tr>
          <tr>
            <td rowspan="3">模拟器</td>
            <td v-for="n in form.days||7">
              <el-select v-model="simulator1_a[n-1]" placeholder="请选择" clearable filterable
                         @change="change(n,'simulator1')">
                <el-option v-for="item in simulatorList" :key="item.simulatorid"
                           :label="item.asset_name" :value="item.simulatorid">
                </el-option>
              </el-select>
              <el-input v-model="simulator1_a_hour[n-1]"></el-input>
            </td>
          </tr>
          <tr>
            <td v-for="n in form.days||7">
              <el-select v-model="simulator2_a[n-1]" placeholder="请选择" clearable filterable
                         @change="change(n,'simulator2')">
                <el-option v-for="item in simulatorList" :key="item.simulatorid"
                           :label="item.asset_name" :value="item.simulatorid">
                </el-option>
              </el-select>
              <el-input v-model="simulator2_a_hour[n-1]"></el-input>
            </td>
          </tr>
          <tr>
            <td v-for="n in form.days||7">
              <el-select v-model="simulator3_a[n-1]" placeholder="请选择" clearable filterable
                         @change="change(n,'simulator3')">
                <el-option v-for="item in simulatorList" :key="item.simulatorid"
                           :label="item.asset_name" :value="item.simulatorid">
                </el-option>
              </el-select>
              <el-input v-model="simulator3_a_hour[n-1]"></el-input>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="button-wrapper">
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        id: '',
        form: {
          courseid: '',
          days: '',
          startdate: '',
          trainer: '',
          tgprice: '',
          tgnum: '',
          state: '',
          labour:'',
          yard:''
        },
        formRules: {
          courseid: [
            {type: 'number', required: true, message: '请选择培训课程', trigger: 'change'}
          ],
          days: [
            {type: 'number', required: true, message: '请填写培训天数', trigger: 'blur'}
          ],
          startdate: [
            {type:'date', required: true, message: '请选择开课日期', trigger: 'change'}
          ],
          trainer: [
            {type: 'number', required: true, message: '请选择主讲培训师', trigger: 'change'}
          ],
          state: [
            {type: 'number', required: true, message: '请选择状态', trigger: 'change'}
          ]
        },
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        courseList: [],
        staffList: [],
        stateList: [{
          value: 1,
          label: '计划'
        }, {
          value: 2,
          label: '确定'
        }, {
          value: 3,
          label: '取消'
        }],
        timeDays: [],        //时段中的日期数
        timeWeeks: [],       //时段中的星期数
        timeDate: [],
        timeMonth: '',
        radio3: '本周',
        trainerList: [],
        operatorList: [],
        classroomList: [],
        simulatorList: [],
        selectedDay: '',
        
        trainer1_m: [],
        trainer2_m: [],
        operator1_m: [],
        operator2_m: [],
        classroom1_m: [],
        classroom2_m: [],
        simulator1_m: [],
        simulator2_m: [],
        simulator3_m: [],
        trainer1_a: [],
        trainer2_a: [],
        operator1_a: [],
        operator2_a: [],
        classroom1_a: [],
        classroom2_a: [],
        simulator1_a: [],
        simulator2_a: [],
        simulator3_a: [],

        trainer1_m_hour: [],
        trainer2_m_hour: [],
        operator1_m_hour: [],
        operator2_m_hour: [],
        classroom1_m_hour: [],
        classroom2_m_hour: [],
        simulator1_m_hour: [],
        simulator2_m_hour: [],
        simulator3_m_hour: [],
        trainer1_a_hour: [],
        trainer2_a_hour: [],
        operator1_a_hour: [],
        operator2_a_hour: [],
        classroom1_a_hour: [],
        classroom2_a_hour: [],
        simulator1_a_hour: [],
        simulator2_a_hour: [],
        simulator3_a_hour: [],
      }
    },
    created() {
      this.id = this.$route.params.id
      this.getStartDate(new Date())
      this.fetchData()
      this.getCourseList()
      //this.getStaffList()
    },
    methods: {
      fetchData() {
        let data = {
          id: this.id
        }
        this.apiPost('train/trainingPlan', data).then(res => {
          res.info.startdate = new Date(Date.parse(res.info.startdate.replace(/-/g, "/")));
          this.form = res.info
          this.staffList = res.teacher
          for(let k in res.plan){
            this[k] = res.plan[k]

//            res.plan[k].forEach(item=>{
//              this[k].push(item)
//            })
//            console.log(this[k],k)
          }

            //console.log(this)

        })

      },
      // 获取时段
      getStartDate(current = new Date()) {
        this.selectedDay = current
        this.timeDays = [];
        this.timeWeeks = [];
        this.timeDate = [];

//        this.trainer_m = [];
//        this.operator1_m = [];
//        this.operator2_m = [];
//        this.classroom_m = [];
//        this.simulator_m = [];
//        this.trainer_a = [];
//        this.operator1_a = [];
//        this.operator2_a = [];
//        this.classroom_a = [];
//        this.simulator_a = [];

        let myDate = new Date(current);
        let newYear = myDate.getFullYear();
        let newMonth = (myDate.getMonth() + 1) < 10 ? '0' + (myDate.getMonth() + 1) : (myDate.getMonth() + 1);
        this.timeMonth = newYear + '年' + newMonth + '月';
        let days = this.form.days ? this.form.days : 7
        for (var i = 0; i < days; i++) {
          let newDate = new Date(myDate.getTime() + 24 * 60 * 60 * 1000 * i)
          this.timeDays.push(newDate.getDate());
          this.timeDate.push(_g.getDateStr(current, i))
          switch (newDate.getDay()) {
            case 0:
              this.timeWeeks.push('周日');
              break;
            case 1:
              this.timeWeeks.push('周一');
              break;
            case 2:
              this.timeWeeks.push('周二');
              break;
            case 3:
              this.timeWeeks.push('周三');
              break;
            case 4:
              this.timeWeeks.push('周四');
              break;
            case 5:
              this.timeWeeks.push('周五');
              break;
            case 6:
              this.timeWeeks.push('周六');
              break;
          }
        }
//        for (let i = 0; i < days; i++) {
//          this.trainer_m[i] = this.trainer_a[i] = ''
//          this.operator1_m[i] = this.operator1_a[i] = ''
//          this.operator2_m[i] = this.operator2_a[i] = ''
//          this.classroom_m[i] = this.classroom_a[i] = ''
//          this.simulator_m[i] = this.simulator_a[i] = ''
//        }
      },

      change(n, name) {
//        if (n == 1 && !this[name + '_m'][0]) {
//          let length = this[name + '_m'].length
//          let val = this[name + '_m'][0]
//          this[name + '_m'] = []
//          this[name + '_a'] = []
//          for (let i = 0; i < length; i++) {
//            this[name + '_m'].push(val)
//            this[name + '_a'].push(val)
//          }
//        }
      },


      getCourseList() {
        this.apiPost('System/courseLists').then(res => {
          this.courseList = res
        })
      },
      getStaffList() {
        this.apiPost('System/getStaffLists').then(res => {
          this.staffList = res
        })
      },
      chooseCourse(id) {
        let data = {
          id: id
        }
        this.apiPost('System/courseAbout', data).then(res => {
          this.trainerList = res.trainer
          this.operatorList = res.operator
          this.classroomList = res.classroom
          this.simulatorList = res.simulator
          this.getStartDate(this.selectedDay)
        })
      },
      daysChange(days) {
        this.form.days = days ? parseInt(days) : ''
        this.getStartDate(this.selectedDay)
      },
      submit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            let data = {
              info: this.form,
              date: this.timeDate.join(','),
              trainer1_m: this.trainer1_m.join(','),
              trainer2_m: this.trainer2_m.join(','),
              operator1_m: this.operator1_m.join(','),
              operator2_m: this.operator2_m.join(','),
              classroom1_m: this.classroom1_m.join(','),
              classroom2_m: this.classroom2_m.join(','),
              simulator1_m: this.simulator1_m.join(','),
              simulator2_m: this.simulator2_m.join(','),
              simulator3_m: this.simulator3_m.join(','),
              trainer1_a: this.trainer1_a.join(','),
              trainer2_a: this.trainer2_a.join(','),
              operator1_a: this.operator1_a.join(','),
              operator2_a: this.operator2_a.join(','),
              classroom1_a: this.classroom1_a.join(','),
              classroom2_a: this.classroom2_a.join(','),
              simulator1_a: this.simulator1_a.join(','),
              simulator2_a: this.simulator2_a.join(','),
              simulator3_a: this.simulator3_a.join(','),


              trainer1_m_hour: this.trainer1_m_hour.join(','),
              trainer2_m_hour: this.trainer2_m_hour.join(','),
              operator1_m_hour: this.operator1_m_hour.join(','),
              operator2_m_hour: this.operator2_m_hour.join(','),
              classroom1_m_hour: this.classroom1_m_hour.join(','),
              simulator1_m_hour: this.simulator1_m_hour.join(','),
              classroom2_m_hour: this.classroom2_m_hour.join(','),
              simulator2_m_hour: this.simulator2_m_hour.join(','),
              simulator3_m_hour: this.simulator3_m_hour.join(','),
              trainer1_a_hour: this.trainer1_a_hour.join(','),
              trainer2_a_hour: this.trainer2_a_hour.join(','),
              operator1_a_hour: this.operator1_a_hour.join(','),
              operator2_a_hour: this.operator2_a_hour.join(','),
              classroom1_a_hour: this.classroom1_a_hour.join(','),
              classroom2_a_hour: this.classroom2_a_hour.join(','),
              simulator1_a_hour: this.simulator1_a_hour.join(','),
              simulator2_a_hour: this.simulator2_a_hour.join(','),
              simulator3_a_hour: this.simulator3_a_hour.join(','),
            }
            this.apiPost('Train/trainingEdit', data).then(res => {
              let remind = res.error ? 'error' : 'success'
              _g.toastMsg(remind, res.msg)
              if (!res.error) {
                router.replace('/training/list')
              }
            })
          } else {
            _g.toastMsg('warning', '请填写完整字段')
            return false
          }
        })

      }
    }
  }
</script>
<style lang="css" scoped>
  #temp {
    padding: 0 50px;
  }

  .title {
    line-height: 60px;
    text-align: center;
  }

  .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }

  .times {
    text-align: center;
    margin: 20px 0;
    color: #0177BF;
    font-size: 18px;
    font-weight: 900;
    position: relative;
  }

  .times > div {
    position: absolute;
    right: 20px;
    top: -5px;
    font-weight: normal;
  }

  .table-wrapper {
    width: 100%;
    overflow: auto;
  }

  thead {
    height: 40px !important;
    line-height: 40px !important;
  }

  tbody > tr {
    height: 30px !important;
    line-height: 30px !important;
  }

  tbody > tr:nth-child(2n) {
    background-color: #fff !important;
  }

  tbody > tr:hover {
    background: #fff !important;
    color: #666 !important;
  }

  th, td {
    min-width: 120px;
    border: 1px solid #e5e5e5;
  }

  .select-td {

  }

  .button-wrapper {
    text-align: center;
    padding: 30px 0;
  }

  .training-table-wrapper td .el-select{
    float: left;
    width: 75%;
  }
  .training-table-wrapper td .el-input{
    float: left;
    width: 25%;
  }
</style>
